<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title> Yoka365 </title>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

		<link href="http://cdn.bootcss.com/pace/1.0.2/themes/black/pace-theme-center-circle.css" rel="stylesheet" />

		<link href="http://cdn.bootcss.com/ratchet/2.0.2/css/ratchet.min.css" rel="stylesheet">
		<link href="http://cdn.bootcss.com/ratchet/2.0.2/css/ratchet-theme-ios.min.css" rel="stylesheet">

		<style>
		form {
			padding: 10px;
		}

		.even {
			background-color: #efeff4;
		}

		.row {
			margin: 8px;
			clear: left;
		}

		.row .col {
			display: inline-block;
			float: left;
		}

		.row .col-20 {
			width: 20%;
		}

		.row .col-60 {
			width: 60%;
		}

		</style>
	</head>

	<body>
		<header class="bar bar-nav">
			<h1 class="title">我的管理</h1>
		</header>

		<div class="bar bar-standard bar-header-secondary">
			<h3 class="title" id="companyName"></h3>
		</div>

		<div class="content">
			<div class="card">
			<ul class="table-view">
				<li class="table-view-cell">
				<a class="navigate-right" yo-href="#pageScanerList">
					显示打卡二维码
				</a>
				</li>

				<li class="table-view-cell">
				<a class="navigate-right" yo-href="#pageMeetingList">
					显示会议签到二维码
				</a>
				</li>

				<li class="table-view-cell">
				<a class="navigate-right" yo-href="#pageStat">
					打卡统计
				</a>
				</li>
			</ul>
			</div>

			<div class="card">
			<ul class="table-view">
				<li class="table-view-cell" id="labelChangePwd">
				<a class="navigate-right" href="#pageChangePwd">
					修改密码
				</a>
				</li>

				<li class="table-view-cell" id="labelChangeUser">
				<a class="navigate-right" yo-href="#pageChangeUser">
					切换用户
				</a>
				</li>
			</ul>
			</div>
		</div>

		<!-- *** *** *** *** *** *** *** *** *** *** *** *** -->
		<div id="pageScanerList" class="modal">
			<header class="bar bar-nav">
				<h1 class="title">显示打卡二维码</h1>
				<a class="icon icon-left-nav pull-left" href="#pageScanerList"></a>
			</header>

			<div class="content">
				<ul class="table-view" id="scanerList">
				</ul>
			</div>
		</div>

		<!-- *** *** *** *** *** *** *** *** *** *** *** *** -->
		<div id="pageMeetingList" class="modal">
			<header class="bar bar-nav">
				<h1 class="title">显示会议签到二维码</h1>
				<a class="icon icon-left-nav pull-left" href="#pageMeetingList"></a>
			</header>

			<div class="content">
				<ul class="table-view" id="meetingList">
				</ul>
			</div>
		</div>

		<!-- *** *** *** *** *** *** *** *** *** *** *** *** -->
		<div id="pageStat" class="modal">
			<header class="bar bar-nav">
				<h1 class="title">打卡统计</h1>
				<a class="icon icon-left-nav pull-left" href="#pageStat"></a>
				<a class="icon icon-list pull-right" yo-href="#pageStatChart"></a>
			</header>

			<div class="bar bar-standard bar-header-secondary">
				<div class="segmented-control">
					<a class="control-item" yo-href="#chooseDateModal">选　择　日　期</a>
					<a class="control-item" yo-href="#chooseScanerMeetingModal">选择打卡器会议</a>
				</div>
			</div>

			<div class="content">
			<div class="card">
				<ul class="table-view" id="statRecordList">
				</ul>
			</div>
			</div>

			<div class="bar bar-standard bar-footer">
				<h3 class="title" id="labelTotalCount"></h3>
				<a class="icon icon-left-nav pull-left" id="btnPagePre">上一页</a>
				<a class="icon icon-right-nav pull-right" id="btnPageNext">下一页</a>
			</div>
		</div>

		<div id="pageStatChart" class="modal">
			<header class="bar bar-nav">
				<h1 class="title">打卡统计图表</h1>
				<a class="icon icon-left-nav pull-left" href="#pageStatChart"></a>
			</header>

			<div class="content">
				<canvas id="statChart" width="300" height="300"></canvas> 
			</div>
		</div>

		<!-- *** *** *** *** *** *** *** *** *** *** *** *** -->
		<div id="pageChangePwd" class="modal">
			<header class="bar bar-nav">
				<h1 class="title">修改密码</h1>
				<a class="icon icon-left-nav pull-left" href="#pageChangePwd"></a>
			</header>

			<div class="content">
				<form onsubmit="return false;">
					<input type="password" id="changePwd1" placeholder="请输入密码">
					<input type="password" id="changePwd2" placeholder="请再次输入密码">
					<button class="btn btn-positive btn-block" id="btnChangePwd">确定</button>
				</form>
			</div>
		</div>

		<!-- *** *** *** *** *** *** *** *** *** *** *** *** -->
		<div id="pageChangeUser" class="modal">
			<header class="bar bar-nav">
				<h1 class="title">用户登录</h1>
				<a class="icon icon-left-nav pull-left" href="#pageChangeUser"></a>
			</header>

			<div class="content">
				<form onsubmit="return false;">
					<input type="text" id="inputCompanyId" placeholder="请输入公司ID">
					<input type="password" id="inputPwd" placeholder="请输入密码">
					<button class="btn btn-positive btn-block" id="btnChangeUser">确定</button>
				</form>
			</div>
		</div>

		<!-- *** *** *** *** *** *** *** *** *** *** *** *** -->
		<div id="chooseDateModal" class="modal">
		  <header class="bar bar-nav">
			<a class="icon icon-left-nav pull-left" href="#chooseDateModal"></a>
			<h1 class="title">选择日期范围</h1>
		  </header>

		  <div class="content">
			<ul class="table-view" id="dateRangeList">
			  {foreach item=one from=$dateRangeList}
			  <li class="table-view-cell media">
				<a class="navigate-right" value="{$one}">
				  <div class="media-body">
					{$one}
				  </div>
				</a>
			  </li>
			  {/foreach}
			</ul>
		  </div>
		</div>

		<div id="chooseScanerMeetingModal" class="modal">
		  <header class="bar bar-nav">
			<a class="icon icon-left-nav pull-left" href="#chooseScanerMeetingModal"></a>
			<h1 class="title">选择打卡器/会议</h1>
		  </header>

			<div class="bar bar-standard bar-header-secondary">
				<button class="btn btn-block btn-primary" id="scanerMeetingRangeCancel">取消</button>
			</div>

		  <div class="content">
			<ul class="table-view" id="scanerMeetingRangeList">
			</ul>
		  </div>
		</div>

	</body>
</html>

<script>
var paceOptions = {
  // Disable the 'elements' source
  elements: false,

  // Only show the progress on regular and ajax-y page navigation,
  // not every request
  restartOnRequestAfter: false
};
</script>

<script src="http://cdn.bootcss.com/ratchet/2.0.2/js/ratchet.min.js"></script>
<script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdn.bootcss.com/zepto/1.1.4/zepto.min.js"></script>
<script src="http://cdn.bootcss.com/fastclick/1.0.3/fastclick.min.js"></script>
<script src="http://cdn.bootcss.com/moment.js/2.8.4/moment.min.js"></script>
<script src="http://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<script src="http://cdn.bootcss.com/Chart.js/1.0.1-beta.4/Chart.min.js"></script>

<script src="/public/ibid/js/yo.js"></script>
<script src="/public/ibid/js/yoka.js"></script>
